<!DOCTYPE html>
<html>
<head>
    <title>编辑商品:所有商品</title>
    #parse("sys/header.html")
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <Row :gutter="16">
            <div class="search-group">
                <i-col span="2">
                    <i-input v-model="q.id" @on-enter="query" placeholder="编号"/>
                </i-col>
                <i-col span="4">
                    <i-input v-model="q.name" @on-enter="query" placeholder="名称"/>
                </i-col>
                <i-col span="3">
                    <i-select v-model="q.type" placeholder="产品类型">
                        <i-option :value="1">价格产品</i-option>
                        <i-option :value="2">SPC兑换</i-option>
                        <i-option :value="3">余额兑换</i-option>
                        <i-option :value="4">D-one产品</i-option>
                        <i-option :value="5">汽车产品</i-option>
                    </i-select>
                </i-col>
                <i-button @click="query">查询</i-button>
                <i-button @click="reloadSearch">重置</i-button>
            </div>
            <div class="buttons-group">
                #if($shiro.hasPermission("product:info"))
                <i-button type="warning" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;查看</i-button>
                #end
                #if($shiro.hasPermission("product:save"))
                <i-button type="info" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</i-button>
                #end
                #if($shiro.hasPermission("product:update"))
                <i-button type="warning" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</i-button>
                #end
                #if($shiro.hasPermission("product:delete"))
                <i-button type="error" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</i-button>
                #end
            </div>
        </Row>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>
    <Card v-show="!showList">
        <Tabs>
            <Tab-pane label="商品详情">
                <p slot="title">{{title}}</p>
                <i-form ref="formValidate" :model="product" :rules="ruleValidate" :label-width="110">
                    <Row>
                        <i-col span="7">
                            <Form-item label="产品编号" prop="id">
                                <i-input v-model="product.id" style="width: 288px;" placeholder="商品序列号" readonly/>
                            </Form-item>
                        </i-col>
                        <i-col span="7">
                            <Form-item label="产品名称" prop="name">
                                <i-input v-model="product.name" style="width: 288px;" placeholder="名称"/>
                            </Form-item>
                        </i-col>
                    </Row>
                    <Form-item label="支付方式" prop="payWay">
                        <Checkbox-group v-model="payList">
                            <Checkbox label="1">微信</Checkbox>
                            <Checkbox label="2">支付宝</Checkbox>
                            <Checkbox label="4">SPC</Checkbox>
                        </Checkbox-group>
                    </Form-item>

                    <Row>
                        <i-col span="13">
                            <Form-item label="商品列表图" prop="imageList">
                                <i-input v-model="product.imageList" placeholder="商品列表图" readonly/>
                            </Form-item>
                        </i-col>
                        <i-col span="3">
                            <Form-item :label-width="1">
                                <Upload style="width: 300px;" action="../sys/oss/upload?prefix=product"
                                        :format="['jpg','jpeg','png']"
                                        max-size="2048"
                                        :on-success="handleSuccessPicUrl" :on-format-error="handleFormatError"
                                        :show-upload-list="false"
                                        :on-exceeded-size="handleMaxSize">
                                    <i-button icon="ios-cloud-upload-outline">上传图片</i-button>
                                </Upload>
                            </Form-item>
                        </i-col>
                        <i-col span="3">
                            <Form-item :label-width="1">
                                <i-button icon="eye" @click="eyeImagePicUrl">预览图片</i-button>
                            </Form-item>
                        </i-col>
                    </Row>

                    <Form-item label="描述" prop="describ">
                        <i-input v-model="product.describ" placeholder="商品描述"/>
                    </Form-item>
                    <Form-item label="其他" prop="other">
                        <i-input v-model="product.other" placeholder="商品其他描述"/>
                    </Form-item>
                    <Form-item label="其他1" prop="other1">
                        <i-input v-model="product.other1" placeholder="商品其他描述1"/>
                    </Form-item>
                    <Row>
                        <i-col span="7">
                            <Form-item label="现价" prop="price">
                                <Input-number :min="0" :step="1" v-model="product.price" placeholder="商品现价"
                                              style="width: 188px;"/>
                            </Form-item>
                        </i-col>
                        <i-col span="7">
                            <Form-item label="原价" prop="oldPrice">
                                <Input-number :min="0" :step="1" v-model="product.oldPrice" placeholder="原价"
                                              style="width: 188px;"/>
                            </Form-item>
                        </i-col>
                    </Row>

                    <Row>
                        <i-col span="7">
                            <Form-item label="spc价格" prop="spcPrice">
                                <Input-number :min="0" :step="1" v-model="product.spcPrice" placeholder="spc价格"
                                              style="width: 188px;"/>
                            </Form-item>
                        </i-col>
                        <i-col span="7">
                            <Form-item label="数量" prop="number">
                                <Input-number :min="0" :step="1" v-model="product.number" placeholder="商品数量"
                                              style="width: 188px;"/>
                            </Form-item>
                        </i-col>
                    </Row>
                    <Form-item label="产品页面路径" prop="productUrl">
                            <textarea v-model="product.productUrl" placeholder="产品页面（h5地址）" style="display: inline-block;
                            width: 100%;
                            line-height: 1.5;
                            padding: 4px 7px;
                            font-size: 12px;
                            border: 1px solid #dddee1;
                            border-radius: 4px;
                            color: #495060;
                            background-color: #fff;
                            background-image: none;
                            position: relative;
                            cursor: text;
                            transition: border .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out;"/></textarea>
                    </Form-item>
                    <Form-item label="上架" prop="statu">
                        <Radio-group v-model="product.statu">
                            <Radio label="1">
                                <span>上架</span>
                            </Radio>
                            <Radio label="0">
                                <span>下架</span>
                            </Radio>
                        </Radio-group>
                    </Form-item>
                    <Form-item label="类型" prop="type">
                        <Radio-group v-model="product.type">
                            <Radio label="1">
                                <span>价格产品</span>
                            </Radio>
                            <Radio label="2">
                                <span>兑换产品</span>
                            </Radio>
                            <Radio label="3">
                                <span>余额兑换产品</span>
                            </Radio>
                            <Radio label="4">
                                <span>D-one产品</span>
                            </Radio>
                            <Radio label="5">
                                <span>汽车产品</span>
                            </Radio>
                        </Radio-group>
                    </Form-item>
                    <Row>
                        <i-col span="5">
                            <Form-item label="商品一级分类" prop="cateL1">
                                <i-select v-model="product.cateL1" placeholder="商品一级分类" @on-change="getCategorys">
                                    <i-option :value="categoryL1.id" v-for="categoryL1 in categorysL1">
                                        {{categoryL1.name}}
                                    </i-option>
                                </i-select>
                            </Form-item>
                        </i-col>
                        <i-col span="5">
                            <Form-item label="商品二级分类" prop="cateL2">
                                <i-select v-model="product.cateL2" placeholder="商品二级分类" @on-change="queryCategoryL2">
                                    <i-option :value="categoryL2.id" v-for="categoryL2 in categorysL2">
                                        {{categoryL2.name}}
                                    </i-option>
                                </i-select>
                            </Form-item>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col span="5">
                            <Form-item label="产品服务费" prop="rate">
                                <i-input
                                        v-model="isNaN(parseFloat(categoryL2.rate * product.price).toFixed(2))?0:parseFloat(categoryL2.rate * product.price).toFixed(2)"
                                        placeholder="产品服务费" readonly/>
                            </Form-item>
                        </i-col>
                        <i-col span="5">
                            <Form-item label="赠送能量利率" prop="giveEnergy">
                                <i-input v-model="categoryL2.energyRate" placeholder="赠送能量利率" readonly/>
                            </Form-item>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col span="5">
                            <Form-item label="释放spc利率" prop="spcFree">
                                <i-input v-model="categoryL2.spcFree" placeholder="释放spc利率" readonly/>
                            </Form-item>
                        </i-col>
                        <i-col span="5">
                            <Form-item label="团队奖励利率" prop="giveTeam">
                                <i-input v-model="categoryL2.gaveTeam" placeholder="团队奖励利率" readonly/>
                            </Form-item>
                        </i-col>
                    </Row>

                    <Row>
                        <i-col span="5">
                            <Form-item label="代理商编号" prop="merchantId">
                                <i-input v-model="product.merchantId" placeholder="默认:1" readonly/>
                            </Form-item>
                        </i-col>
                        <i-col span="5">
                            <Form-item label="代理商名称" prop="merchantName">
                                <i-input v-model="product.merchantName" placeholder="默认:动动体育" readonly/>
                            </Form-item>
                        </i-col>
                    </Row>
                    <Form-item label="商品内容" prop="body">
                        <div id="productbody"></div>
                    </Form-item>
                    <Row>
                        <i-col span="16" style="margin-left: 110px">
                            <table class="table table-bordered table-striped text-center">
                                <tr>
                                    <td v-for="b,index in product.bannerList">
                                        <img :src="b" width="90px" height="90px">
                                    </td>
                                </tr>
                                <tr>
                                    <td v-for="b,index in product.bannerList">
                                        <i-button type="error" size="small" @click="delBanner(index)">删除</i-button>
                                    </td>
                                </tr>
                            </table>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col span="6">
                            <Form-item label="轮播图" prop="">
                            </Form-item>
                        </i-col>
                        <i-col span="3">
                            <Form-item :label-width="1">
                                <Upload style="width: 300px;" action="../sys/oss/upload?prefix=product"
                                        :format="['jpg','jpeg','png']"
                                        max-size="2048"
                                        :on-success="handleBannerPicUrl" :on-format-error="handleFormatError"
                                        :show-upload-list="false"
                                        :on-exceeded-size="handleMaxSize">
                                    <i-button icon="ios-cloud-upload-outline">上传轮播图</i-button>
                                </Upload>
                            </Form-item>
                        </i-col>
                    </Row>
                    <Form-item>
                        <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
                        <i-button type="warning" @click="reload" style="margin-left: 8px"/>
                        返回</i-button>
                        <i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置
                        </i-button>
                    </Form-item>
                </i-form>

            </Tab-pane>
            <Tab-pane label="商品款式">
                <Card>
                    <p slot="title">款式列表</p>
                    <table class="table table-bordered table-striped text-center">
                        <tr>
                            <td><strong>编号</strong></td>
                            <td><strong>名称</strong></td>
                            <td><strong>价格</strong></td>
                            <td><strong>原始价格</strong></td>
                            <td><strong>SPC价格</strong></td>
                            <td><strong>规格</strong></td>
                            <td><strong>图片</strong></td>
                            <td><strong>创建时间</strong></td>
                            <td><strong>备注</strong></td>
                            <td><strong>操作</strong></td>
                        </tr>
                        <tr v-for="(style,index) in styles">
                            <td>{{style.id}}</td>
                            <td>{{style.name}}</td>
                            <td>{{style.price}}</td>
                            <td>{{style.oldPrice}}</td>
                            <td>{{style.spcPrice}}</td>
                            <!--<td>{{style.giveEnergy}}</td>-->
                            <!--<td>{{style.spcFree}}</td>-->
                            <td>{{style.dimensions}}</td>
                            <td>
                                <img :src="style.imageUrl" width="60px" height="60px">
                            </td>
                            <td>{{style.createDate}}</td>
                            <td>{{style.remark}}</td>
                            <td>
                                <i-button type="error" size="small" @click="delstyle(index)">删除</i-button>
                            </td>
                        </tr>
                    </table>
                </Card>
                <Card>
                    <p slot="title">款式新增</p>
                    <i-form ref="formValidate" :model="proStyle" :rules="ruleValidate" :label-width="80">
                        <Row>
                            <i-col span="7">
                                <Form-item label="款式名称" prop="">
                                    <i-input v-model="addProStyle.name" style="width: 288px;" placeholder="款式名称"/>
                                </Form-item>
                            </i-col>
                            <i-col span="7">
                                <Form-item label="价格" prop="price">
                                    <Input-number :min="0" :step="1" v-model="addProStyle.price" placeholder="价格"
                                                  style="width: 288px;"/>
                                </Form-item>
                            </i-col>
                        </Row>
                        <Row>
                            <i-col span="7">
                                <Form-item label="原价" prop="oldPrice">
                                    <Input-number :min="0" :step="1" v-model="addProStyle.oldPrice" placeholder="原价"
                                                  style="width: 288px;"/>
                                </Form-item>
                            </i-col>
                            <i-col span="7">
                                <Form-item label="SPC价格" prop="spcPrice">
                                    <Input-number :min="0" :step="1" v-model="addProStyle.spcPrice" placeholder="SPC价格"
                                                  style="width: 288px;"/>
                                </Form-item>
                            </i-col>
                        </Row>

                        <Row>
                            <i-col span="7">
                                <Form-item label="赠送能量" prop="giveEnergy">
                                    <Input-number :min="0" :step="1"
                                                  v-model="isNaN(parseFloat(categoryL2.energyRate * addProStyle.price).toFixed(2))?0:parseFloat(categoryL2.energyRate * addProStyle.price).toFixed(2)"
                                                  placeholder="赠送能量"
                                                  style="width: 288px;" readonly/>
                                </Form-item>
                            </i-col>
                            <i-col span="7">
                                <Form-item label="释放SPC" prop="spcFree">
                                    <Input-number :min="0" :step="1"
                                                  v-model="isNaN(parseFloat(categoryL2.spcFree * addProStyle.price).toFixed(2))?0:parseFloat(categoryL2.spcFree * addProStyle.price).toFixed(2)"
                                                  placeholder="释放SPC"
                                                  style="width: 288px;" readonly/>
                                </Form-item>
                            </i-col>
                        </Row>
                        <Row>
                            <i-col span="7">
                                <Form-item label="团队奖励" prop="giveTeam">
                                    <Input-number :min="0" :step="1"
                                                  v-model="isNaN(parseFloat(categoryL2.gaveTeam * addProStyle.price).toFixed(2))?0:parseFloat(categoryL2.gaveTeam * addProStyle.price).toFixed(2)"
                                                  placeholder="团队奖励"
                                                  style="width: 288px;" readonly/>
                                </Form-item>
                            </i-col>
                            <i-col span="12">
                                <Form-item label="备注" prop="remark">
                                    <i-input v-model="addProStyle.remark" style="width: 288px;" placeholder="备注"/>
                                </Form-item>
                            </i-col>
                        </Row>
                        <Row>
                            <i-col span="16">
                                <Form-item label="图片地址" prop="imageUrl">
                                    <i-input v-model="addProStyle.imageUrl" placeholder="图片地址" readonly/>
                                </Form-item>
                            </i-col>
                            <i-col span="3">
                                <Form-item :label-width="1">
                                    <Upload style="width: 300px;" action="../sys/oss/upload?prefix=proStyle"
                                            :format="['jpg','jpeg','png']"
                                            max-size="2048"
                                            :on-success="handleSuccessProImage" :on-format-error="handleFormatError"
                                            :show-upload-list="false"
                                            :on-exceeded-size="handleMaxSize">
                                        <i-button icon="ios-cloud-upload-outline">上传图片</i-button>
                                    </Upload>
                                </Form-item>
                            </i-col>
                            <i-col span="3">
                                <Form-item :label-width="1">
                                    <i-button icon="eye" @click="eyeImageProImage">预览图片</i-button>
                                </Form-item>
                            </i-col>
                        </Row>
                        <table class="table table-bordered table-striped text-center">
                            <tr>
                                <td><strong>规格名</strong></td>
                                <td><strong>价格</strong></td>
                                <td><strong>数量</strong></td>
                                <td><strong>排序</strong></td>
                                <td><strong>规格描述</strong></td>
                                <td><strong>操作</strong></td>
                            </tr>
                            <tr v-for="(data,index) in dimensions">
                                <td style="display: none">{{index}}</td>
                                <td>{{data.name}}</td>
                                <td>{{data.price}}</td>
                                <td>{{data.number}}</td>
                                <td>{{data.sort}}</td>
                                <td>{{data.describe}}</td>
                                <td>
                                    <i-button type="error" @click="delDimensions(index)">删除</i-button>
                                </td>
                            </tr>
                        </table>
                        <Form-item>
                            <i-button type="info" @click="addstyle" style="margin-left: 50%">保存款式</i-button>
                        </Form-item>
                    </i-form>
                </Card>
                <Card>
                    <p slot="title">添加规格</p>
                    <table class="table table-bordered table-striped text-center">
                        <tr>
                            <td><strong>规格名</strong></td>
                            <td><strong>价格</strong></td>
                            <td><strong>数量</strong></td>
                            <td><strong>排序</strong></td>
                            <td><strong>规格描述</strong></td>
                        </tr>
                        <tr>
                            <td>
                                <i-input v-model="dname" placeholder="规格名"/>
                            </td>
                            <td>
                                <i-input v-model="dprice" placeholder="价格"/>
                            </td>
                            <td>
                                <Input-number :min="0" :step="1" v-model="dnumber" placeholder="数量"/>
                            </td>
                            <td>
                                <Input-number :min="0" :step="1" v-model="dsort" placeholder="排序"/>
                            </td>
                            <td>
                                <i-input v-model="ddescribe" placeholder="规格描述"/>
                            </td>
                        </tr>
                    </table>
                    <i-button type="info" @click="addDimensions" style="margin-left: 50%">添加规格</i-button>
                </Card>

            </Tab-pane>
        </Tabs>
    </Card>
</div>

<script src="${rc.contextPath}/js/product/productnew.js?_${date.systemTime}"></script>
</body>
<style type="text/css">
    .ui-jqgrid .ui-jqgrid-bdiv {
        height: 600px;
    }
</style>
</html>